<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto group">
			<view class="flex-col section_3">
				<view class="flex-row items-center space-x-20">
					<view class="flex-col justify-start items-center image-wrapper">
						<image class="image_6" :src="content.cover" />
					</view>
					<text class="font_2">{{content.shop_name}}</text>
				</view>
				<view class="flex-row items-center group_2">
					<text class="font_3 text_3">商品满意度</text>
					<view class="flex-row items-center" v-for="item in 5" :key="item">
						<image src="/static/level_ac.png" v-if="level>=(item+1)" class="image_7 image_8" mode=""
							@tap="toLeve(item)"></image>
						<image src="/static/level.png" v-else class="image_7 image_8" mode="" @tap="toLeve(item)">
						</image>
					</view>
					<!-- <view class="flex-row items-center" v-for="item in 10" :key="item">
						<image src="/static/level5.png" class="image7" mode=""></image>
						<image src="/static/level5.png" class="image7"
							style="transform: rotateY(180deg);margin-left: -1rpx;" mode=""></image>
						<image src="/static/level6.png" class="image7" mode=""></image>
						<image src="/static/level6.png" class="image7"
							style="transform: rotateY(180deg);margin-left: -1rpx;" mode=""></image>
					</view> -->
					<!-- <u-rate v-model="level"  activeColor="#FF4200" :allowHalf="true" size="22"></u-rate> -->
					<text class="font_3 text_4" v-if="level>=1&&level<=2">不满意</text>
					<text class="font_3 text_4" v-if="level>2&&level<=4">满意</text>
					<text class="font_3 text_4" v-if="level>4&&level<=6">非常好</text>
				</view>
				<view class="flex-row items-center group_3 space-x-13 relative">
					<textarea cols="30" rows="10" class="font_3" maxlength="100" style="padding: 5rpx;"
						v-model="text"></textarea>
					<view class="edit" v-if="text==''">
						<image class="shrink-0 image_13" src="/static/edit2.png" />
						<text class="text_5">写下您的评论，可能帮助我们为您提供更好的服务</text>
					</view>
				</view>
				<view class="flex-row justify-start items-center self-start image-wrapper_2">
					<view class="relative" v-for="(item,index) in imageUrl" :key="index">
						<image class="image_14" :src="item.abs_url" />
						<image src="/static/close.png" class="close" mode=""></image>
					</view>
					<image class="image_14" src="/static/update.png" @click="toUpdate" />
				</view>
			</view>
			<view class="flex-col justify-start items-center button" @click="toComment"><text class="text_6">提交</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,

		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	let level = ref(0)
	let text = ref('')
	let order_id = ref('')
	let shop_id = ref('')
	let index = ref('')
	let content = ref({})
	let imageUrl = ref([])
	onLoad((option) => {
		console.log(option);
		order_id.value = option.order_id
		shop_id.value = option.shop_id
		getDate()
		index.value = option.index
	})
	const toLeve = (num) => {
		// console.log(num);

		level.value = num + 1
	}
	const toUpdate = () => {
		uni.chooseImage({
			count: 1, //默认9
			success: function(res) {
				console.log(res.tempFilePaths);
				proxy.$req.upload(proxy.$api.SystemInfo.upload, res.tempFilePaths[0], 1).then((res) => {
					console.log(res, "上传");
					if (res.flag == "success") {
						let obj = {
							abs_url: res.data.list[0].abs_url,
							id: res.data.list[0].id
						}
						imageUrl.value.push(obj)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
					// let imgData = JSON.parse(res.data.replace('\uFEFF', ''))

				})
				// that.$req.upload(that.$api.SystemInfo.upload, res.tempFilePaths[0], 1).then((res) => {
				// 	console.log(res, "上传");
				// 	// let imgData = JSON.parse(res.data.replace('\uFEFF', ''))
				// 	that.content.avatar_path = res.data.list[0].abs_url
				// 	that.avatarId = res.data.list[0].id
				// })
			}
		})
	}
	const getDate = () => {
		proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.evaluatePage, {
			member_id: uni.getStorageSync('member_id') || '',
			order_id: order_id.value
		}).then(res => {
			if (res.flag == "success") {
				content.value = res.data
				// console.log(data.value.content);
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
		})
	}
	const toComment = () => {
		let ids = []
		imageUrl.value.forEach(ele => {
			ids.push(ele.id)
		})
		proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.doEvaluate, {
			member_id: uni.getStorageSync('member_id'),
			order_id: order_id.value,
			score: level.value - 1,
			content: text.value,
			pictures: ids.join(',')
		}).then(res => {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			if (res.flag == "success") {
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
				uni.$emit('detail', {
					index: index.value || '',
					type: '取消'
				})
			}
		})
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f8f8f8;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;

		.group {
			padding: 29rpx 30rpx 56rpx;
			overflow-y: auto;

			.section_3 {
				padding: 36rpx 29rpx 30rpx;
				background-color: #ffffff;
				border-radius: 20rpx;

				.space-x-20 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 20rpx;
					}

					.image-wrapper {
						// padding: 22rpx 0;
						// background-color: #272a25;
						border-radius: 20rpx;
						width: 124rpx;
						height: 124rpx;
						// border: solid 1rpx #dddddd;

						.image_6 {
							width: 124rpx;
							height: 124rpx;
							border-radius: 20rpx;
						}
					}

					.font_2 {
						font-size: 36rpx;
						font-family: PingFang SC;
						line-height: 48rpx;
						font-weight: 500;
						width: 75%;
						color: #333333;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}
				}

				.group_2 {
					margin-top: 54rpx;

					.font_3 {
						font-size: 28rpx;
						font-family: PingFang SC;
						line-height: 27rpx;
					}

					.text_3 {
						color: #666666;
						font-weight: 500;
					}

					.image_7 {
						width: 42rpx;
						height: 40rpx;
					}

					.image7 {
						width: 21rpx;
						height: 38rpx;
					}

					.image_8 {
						margin-left: 29rpx;
					}

					.image_9 {
						margin-left: 21rpx;
					}

					.image_10 {
						margin-left: 21rpx;
					}

					.image_11 {
						margin-left: 20rpx;
					}

					.image_12 {
						margin-left: 21rpx;
					}

					.text_4 {
						margin-left: 31rpx;
						color: #ff4200;
					}
				}

				.group_3 {
					margin-top: 65rpx;

					.font_3 {
						width: 100%;
						font-size: 28rpx;
						font-family: PingFang SC;
						line-height: 27rpx;
					}

					.edit {
						position: absolute;
						top: 0;
					}

					.image_13 {
						width: 23rpx;
						height: 23rpx;
					}

					.text_5 {
						color: #999999;
						font-size: 26rpx;
						font-family: PingFang SC;
						line-height: 26rpx;
					}
				}

				.space-x-13 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 13rpx;
					}
				}

				.image-wrapper_2 {
					// margin-top: 381rpx;
					// padding: 50rpx 0;
					flex-wrap: wrap;
					// background-color: #f8f8f8;
					border-radius: 20rpx;
					// width: 140rpx;
					// border: dashed 2rpx #f0f0f0;

					.image_14 {
						width: 140rpx;
						height: 140rpx;
						border-radius: 20rpx;
						margin: 0 9rpx;
					}

					.close {
						position: absolute;
						right: 9rpx;
						top: 0;
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.button {
				padding: 36rpx 0;
				background-color: #54bc6e;
				background-image: linear-gradient(0deg, #00a796 0%, #54bc6e 100%);
				border-radius: 16rpx;
				position: fixed;
				bottom: 40rpx;
				left: 5%;
				width: 90%;

				.text_6 {
					color: #ffffff;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 31rpx;
				}
			}
		}
	}
</style>